<template>
  <div class="form-generator-wrap edit-from-generator-wrap">
    <!-- :init-data="false" -->
    <form-generator ref="formGenRef" :init-data="id === undefined">
      <template v-slot:footer>
        <el-button type="primary" plain @click="onSubmit()"
          >保存</el-button
        >
        <el-button plain @click="onClear">取消</el-button>
      </template>
    </form-generator>
  </div>
</template>

<script>
import store from "@/components/FormGenerator/store/tableSheet.js";
import { getTemplateById } from "@/api/workOrder/template";
import { defaults, cloneDeep } from "lodash";
import { stringify, parse } from "@/utils/json.js";

export default {
  name: "WorkOrderAddTemplate",
  props: ["id"],
  components: {
  },
  data() {
    let saveKey = (this.id ? "edit" : "add") + "TemplateForm";
    let defaultForm = {
      modules: [],
    };
    return {
      saveKey,
      defaultForm,
      form: localStorage.getItem(saveKey)
        ? parse(localStorage.getItem(saveKey))
        : cloneDeep(defaultForm),
      rules: {
      },
    };
  },
  created() {
    console.log("this.id", this.id);
    if (this.id !== undefined) {
      this.getDetail();
    }
  },
  mounted() {},
  methods: {
    async getDetail() {
      let { data } = await getTemplateById(this.id);
      console.log('--getDetail--');
      console.log("data", data);
      this.form = defaults(data, this.defaultForm);
      this.$refs.formGenRef.setModules(data.modules);
    },
    async onSubmit() {
      // console.log("drawingList", this.$refs.formGenRef.drawingList);
      try {
        let form = cloneDeep(this.form);
        form.modules = this.$refs.formGenRef.getModules();
        console.log("form", form);
      } catch (error) {
        console.log(error);
      }
    },
    async onClear() {
      /**/
      this.$refs.formGenRef.empty();
    },
  },
  watch: {
    form: {
      handler(val) {
        localStorage.setItem(this.saveKey, stringify(val));
      },
      deep: true,
    },
  },
  computed: {
  },
};
</script>

<style lang="scss" scoped>
@import url('~@/assets/styles/edit-preview-template.scss');
.edit-from-generator-wrap{
  .baseInfo{
    .el-button--mini{
      font-size: 14px;
    }
  }
  .row-2 {
    margin-top: 15px;
  }
}
</style>
